<template>
  <div id="detail-params">
    <table class="sizes" v-for="(table, index) in paramInfo.sizes" :key="index">
      <tr v-for="(tr, indey) in table" :key="indey">
        <td v-for="(td, indez) in tr" :key="indez">{{ td }}</td>
      </tr>
    </table>
    <table class="infos">
      <tr v-for="item in paramInfo.infos" :key="item.key">
        <td class="key">{{ item.key }}</td>
        <td class="value">{{ item.value }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "DetailParams",
  props: {
    paramInfo: {
      type: Object,
    },
  },
};
</script>

<style scoped>
#detail-params{
  padding: 20px;
  border-bottom: solid 5px #f2f5f8;
}
.sizes,
.infos {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
tr {
  height: 42px;
}
td {
  height: 42px;
  border-bottom: solid 1px rgb(206, 206, 206, 0.5);
}
.key{
  width: 95px;
}
</style>